<template>
  <!-- 图文咨询 -->
  <view class="detail block">
    <view class="detail-title">请尽可能详细描述病情</view>
    <textarea
      placeholder="为了更好获得医生帮助,请尽可能详细描述病情"
      placeholder-class="textarea-color"
      :auto-focus="true"
      v-model="submit_data.illness"
    />
  </view>
  <!-- 指导用药 -->
  <view class="guideMed block">
    <checkbox-group @change="checkboxChange">
      <label class="uni-list-cell uni-list-cell-pd">
        <view>
          <checkbox
            value="cb"
            color="#0176ff"
            :checked="submit_data.guide"
          />需要医生指导用药
        </view>
      </label>
    </checkbox-group>
  </view>
  <!-- 上传图片 -->
  <view class="uploadPhoto block">
    <view class="detail-title">上传检查报告或患处照片</view>
    <view class="uploading">
      <view
        class="upload-area"
        v-for="(item, index) in submit_data.ins_report"
        :key="index"
        ><image :src="item" mode="aspectFill" />
      </view>
      <view
        ><image
          src="/static/other/shuxing-img.png"
          @click="uploadimg"
          mode="aspectFill"
        ></image
      ></view>
    </view>
  </view>
  <!-- 选择就诊人 -->
  <view class="chooseDoc block">
    <view class="detail-title">选择就诊人</view>
    <view class="Doc">
      <view class="left">
        <image src="/static/other/touxiang.svg" mode="" />
        <text>{{ name }}</text>
      </view>
      <view class="right">
        <text @click="choosePatient">{{
          name == "" ? "选择就诊人" : "重新选择"
        }}</text>
      </view>
    </view>
  </view>
  <!-- 提交 -->
  <view class="submit">
    <view class="bottomBtn">
      <view class="leftBtn" @click="cal">取消</view>
      <view class="rightBtn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { uploadImage } from "~/untils/uploadImage";
// 开发者服务器 url
import { IMAGEURL } from "~/untils/http";
import { usepatientStore } from "~/store/index";
import apiRequest from "~/api/index";
// 本页面待提交的数据
let submit_data = reactive({
  illness: "", //详情描述
  guide: false, //指导用药
  ins_report: [], //上传的图片
  patient_id: "", //
});
const uploadimg = async () => {
  const res = await uploadImage(IMAGEURL, "上传中", "上传失败");
  console.log(res);
  submit_data.ins_report.push(JSON.parse(res.data).data);
};
// 取消
const cal = () => {
  uni.navigateBack({ delta: 1 });
};

// 跳转至就诊人界面
const choosePatient = () => {
  uni.navigateTo({
    url: "/pages/submit-success/my-patient/my-patient",
  });
};
// 监听选择的就诊人
let name = ref("");
const store = usepatientStore();
store.$subscribe((mutayion, state) => {
  //subscribe=watch
  name.value = state.patient.name;
  submit_data.patient_id = state.patient._id;
});
// 是否需要指导用药
function checkboxChange(event) {
  console.log(event);
  submit_data.guide = event.detail.value.length === 0 ? false : true;
}

// 提交
const submit = async () => {
  uni.showLoading({ title: "提交中", mask: true });
  const res = await apiRequest.GrapHics(submit_data);
  if (res.msg == "提交成功") {
    uni.showToast({ title: "提交成功", icon: "none", duration: 1000 });
  }
};
</script>

<style>
.textarea-color {
  @apply text-green-400;
}
.block {
  margin: 20rpx;
  padding: 20rpx;
  @apply bg-light-50;
  border-radius: 10rpx;
}
.detail-title {
  font-size: 35rpx;
  padding-bottom: 20rpx;
  @apply font-bold;
}
.detail textarea {
  width: 100%;
  height: 250rpx;
}
.uploading {
  @apply flex flex-wrap;
}
.uploading view {
  width: calc(33.3% - 5rpx * 2);
  height: 200rpx;
  margin: 5rpx;
}
.uploading view image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7rpx;
}
/* 底部按钮 */
.bottomBtn {
  padding: 20rpx 0 68rpx 0;
  display: flex;
  background-color: #ffffff;
  justify-content: space-around;
}
.bottomBtn > view {
  width: 40%;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
}
.leftBtn {
  background-color: #e8f2fe;
  color: #3a75f3;
}
.rightBtn {
  background-color: #2c76ef;
  color: #ffffff;
}
.chooseDoc {
  padding-bottom: 200rpx;
}
.chooseDoc .Doc {
  @apply flex;
  align-items: center;
  justify-content: space-between;
}
.chooseDoc image {
  width: 120rpx;
  height: 120rpx;
}
.chooseDoc .right text {
  @apply text-blue-400;
}
.submit {
  @apply fixed bottom-0 right-0 left-0;
}
</style>
